TypeScript入门(一)

325 阅读5分钟

什么TM的是TypeScript?

来给翻译翻译什么他妈的叫TypeScript?

TypeScript 是 JavaScript 的超集(翻译:js没有ts有,js能用的在ts里面都能用),扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修 改,TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

在 JavaScript 中,我们不需要把变量的类型明确写出来,同一个变量可以赋值为不同类型的数据。但是在 TypeScript 中,每一个变量的类型都是确定的,不同类型的数据之间不能赋值。

来举个例子:

// JavaScript
let name = 'yaobinggt'
name = 11 // 不报错

// TypeScript
let name: string = 'yaobinggt'
name = 11    // Error: Type '11' is not assignable to type 'string'.

再打个比方:

你有一个牙刷,还有一个水杯;

Js:牙刷反正都是刷子,刷牙用,刷鞋也可以用,刷马桶也能用。水杯它是一个容器,用来盛水,装饮料也行,哎装尿也啊!(这他妈的就是js,我定义一个变量,这个变量放什么都行,数组,字符串,布尔值...都可以)。

Ts:牙刷只能用来干一种事,刷牙就不能刷别的。水杯只能装一种液体,装水就不能再装其他的。(这就是Ts,我说你能干什么你就只能干什么,变量声明只能放数组,放其他的就报错)。

安装TypeScript

npm全局安装:

npm install -g typescript

创建一个love.ts文件:

function love(name:string){	//给 name函数的参数添加: string类型注解
	return "I love " + name;
}
let UserName = "YaoUU";
document.body.innerHTML=love(UserName);

在命令行上运行,编译love.ts文件:

tsc love.ts

TypeScript 配置文件(转换多个.ts文件)

一个项目中不可能只用一个.ts文件,怎么把所有的.ts文件转换成.js文件;

首先生成一个tsconfig.json文件:

tsc --init

创建完之后如何使用,如何让所有的.ts文件编译,在命令行里面只输入:

tsc

好东西推荐:vs-code插件TypeScript Auto Compiler,对.ts文件进行修改时保存会自动生成新的.js文件。

基本类型

数组

let num = 28;//整形
num = '28';
//报错:Type '"28"' is not assignable to type 'number'.
//不能存储非原有的类型数据,上面已经定义了number类型
//number:
let num =28;
//等同于
let num:number=28;//ts语法

布尔值

//boolean:
let isLogin = false;
//等同于
let isLogin:boolean = false;
//js中可以重新赋值给isLogin
isLogin = 1;//js中非零的数值就是ture,在ts中就报错只能赋值ture或false;

字符串

//string:
let str:string="hello yaobinggt";

any

//不知道储存一个什么类型
let anything;
//等同于
let anything:any;
//尽量不要使用any类型,这样就和js没什么区别了
anything="nihaoma?"
anything=28;//不会报错

数组

let names:Array<string>=['Yaobinggt','Jordan'];

names[0]=100;//错误!只能赋值字符串类型
names[0]='James';//正确

names='Kobe';//错误!names本身是字符串数组
names=['Kobe'];//正确
let number:Array<number>=[2,3];
//等同于
let number:number[]=[2,3];

let anyArray:any[]=['yaobing',23];//这种any方式不严谨

元组

let colors:[string,number]=['yaobinggt',23];
let colors:[string,number]=[23,'yaobinggt'];//类型与值要对应

枚举

enum Color{
	Black,//0
    Yellow = 100,
    Red
}
let myColor:color=Color.red;
console.log(myColor);

返回值类型

function returnValue():number{ //规定返回值的类型为number
	return 22; //返回值的就只能是数字,不能是字符串其他的类型。
}
console.log(returnValue()); // 22

空 void

function sayHello():void{ //无参数、无返回值的函数
	consoloe.log('hello !@');
}

参数类型

function sumValue(value1:number,value2:number):number{ //定义参数类型和返回值类型
	return value1 + value2;
    //return value1*value2; // 如果两个参数中有一个不是数值,那么返回的是NaN
}
console.log(sumValue(1,2));// 3

函数类型

let myFunc:(a:number,b:number)=>number;
myFunc = sumValue;
consolo.log(myFunc(4,6));//10

对象(object)

在ts中设置了一个对象,那他就生成了自己的一个类型,也就生成了自己的一个格式。

let dataObject: { name: string, age: number } = { //完整的对象类型
    name: "yaobinggt",
    age: 28
};
dataObject = {
    name: "yaouu",
    age: 2
}

错误:

let dataObject= {
    name: "yaobinggt",
    age: 28
};
dataObject = { //在ts中设置了一个对象,也就生成了自己的一个格式。
    n: "yaouu",
    a: 2
}

复杂对象类型

我们都知道在对象中我们可以存储各种类型,比如string、number等;

复杂一点的储存函数:

let complex: { data: number[], myFunc: (item: number) => number[] } = {//这个对象里面存储的内容就复杂了数值数组、函数方法
    data: [3, 7, 11],
    myFunc: function (item: number): number[] {
        this.data.push(item);
        return this.data;
    }
}
console.log(complex.myFunc(20));//返回(4) [3, 7, 11, 20]

type

如果我们储存的类型过于的多和复杂,我们每一次写就太多余麻烦,所以ts给我们提供了一个形式 type 来生成我们自己需要的类型

type myType = { data: number[], myFunc: (item: number) => number[] };//type 生成类型
let complex2: myType = {
    data: [3, 7, 11],
    myFunc: function (item: number): number[] {
        this.data.push(item);
        return this.data;
    }
}
console.log(complex.myFunc(20));//返回(4) [3, 7, 11, 20]

union type

let unionType:number | string | boolean =12;
unionType='12';//正确
unionType=true;//正确
unionType={
	name:"yaobinggt",
    age:
};//错误,类型只能在声明的里面选择

检查类型

let checkType=10;
if(typeof checkType=='number'){//检查类型这个地方一定要 "" 引起来
	console.log('number')
}

null & undefined

let myNull=12;
muNull=null;//错误!在严格模式下,ts在第一次声明的时候已经规定了类型;

正确

let myNull=null;
muNull=undefined;

Never

never类型表示的是那些永不存在的值的类型。 例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使 any也不可以赋值给never。

let x:never;
x=123;//不能将其他类型,专为never类型

never的应用场景 抛出异常

function error(message:string):never{
	throw new Error(message);
}

死循环

function infiniteLoop(): never {
    while (true) {
    }
}
let y:number;//y是一个number类型
y=(()=>{
	throw new Error("message");//执行完是抛出异常 never类型赋值给number类型
})();