Typescript入门

Typescript入门

Seale

January 20, 2021

3240 views

No comments

2148 words

编程开发

前言

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 ，但类只允许单继承。

Typescript入门