Typescript入门

前言

Vue3日前已经发布,为了能够更好更快的进行开发,准备学习一下ts,也为了方便我正在写的秋招项目。

NPM安装

使用NPM的可以通过如下命令进行全局安装

npm install -g typescript

示例

我们创建一个新的文件夹,并通过命令行cd进入当前新创建的文件夹下。

之后我们创建一个typescript脚本文件 s1.ts

class Site{
    say():void{
        console.log("我是网站类!")
    }
}
let site = new Site();
site.say()

之后我们通过tsc命令进行编译

tsc s1.ts

之后我们会得到一个js文件

"use strict";
var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.say = function () {
        console.log("我是网站类!");
    };
    return Site;
}());
var site = new Site();
site.say();

之后我们用node命令来执行js

node s1.js

我们可以看到结果

结果

数据类型

  • any:任意类型,声明为 any 的变量可以赋予任意类型的值。
  • number:数字类型
  • string:字符串类型
  • boolean:布尔类型
  • 数组类型:如let x : any[] = [1,"str"]
  • void:用于标识方法返回值的类型,表示该方法没有返回值
  • never:表示不会出现任何值(包括 null 和 undefined)
  • enum:枚举,用于定义数值集合
  • 元组:表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。
  • null:表示值缺失
  • undefined:初始化变量为一个未定义的值

基本语法

变量声明

var var1:string = '你好世界!'

条件判断

同其他高级语言

负号运算符

在ts中,我们可以通过负号运算符来更改number类型变量的正负。

num = -num
console.log(`更改为负号后值:${num}`)
当前为2
更改为负号后值:-2

函数中可选参数和默认参数

ts中可以设置当前函数的参数为可选,可选参数必须跟在必需参数后面。

function test (sex:string,type:string = "人", age?:number){
    return age? `一个${age}岁的${sex}${type}`:`一个${sex}${type}`
}
console.log(test("男","人",18));
}

在ts中同时支持类似Java中的可变参数
声明方式同Java

function test(...vars: any[]){
    ......
}

联合类型

我们可以通过|来进行联合类型的声明

var v:string|number;
v="test" //正常
v=1      //正常
v=false  //报错

接口

interface Animal{
    name:string,
    category:string,
    age:number,
    toString: ()=>string
}

let cat:Animal = {
    name: "猫",
    category: "猫科类",
    age: 20,
    toString: ()=>`名为:${cat.name},类型为:${cat.category},年龄为:${cat.age}`
}
console.log(cat.toString());

同时需要注意的是,interface为ts中的特性,并不能转为js脚本。

Typescript 允许接口继承多个接口,使用关键字 extends ,但类只允许单继承。


本作品采用知识共享署名 4.0 国际许可协议进行许可。

如果可以的话,请给我钱请给我点赞赏,小小心意即可!

Last modification:January 20th, 2021 at 05:51 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment