什么是typescript
typescript的历史和原理什么的问度娘,简单复习就是让自己快速的掌握最简单的东西,我的目标是最短的时候感受那一丝丝的愉悦,所以让我们在typescript的外面蹭蹭,喜欢的朋友自己深入。
typescript就是JavaScript的超级,对变量进行一种限制。
菜鸡:anyscript!!!。
高手:typescript更加严谨,方便重构和减少bug等等。
大佬:任何东西都要根据具体的情况而来,需要考虑公司和团队的具体情况,没有完美的编程语言但是有最合适的编程语言。
安装和使用
安装
使用命令行
npm i typescript -g
查看是否安装好,运行命令行
tsc -v
出现版本号就ok
使用
1.创建文件first.ts,并写入如下代码
(()=>{
let girl: String = 'linghua';
console.log(girl);
})()
2.运行命令行
tsc ./first.ts
会生成first.js文件,然后运行first.js文件,ts的运行方式很多,大多数会选择vscode自带的运行方式。自己百度。
但无论什么方式,本质就是先把ts编译为js再进行运行
类型限制方式
typescript重点就是加了类型限制,书写方式是这样的
let girl: string = 'linghua';
格式为 变量名 :变量类型,
当赋值的类型和标注的类型不一样时就会报错
基础类型
-
布尔
let boo: boolean = true -
undefined
let und: undeefined = undefined -
null
let un: null = null -
数字
let nub: number = 1 -
字符串
let str: string = '找富婆' -
any
任意类型,就是当你不知道用什么类型的时候就用any,是初学者不二的法门,也是anyscript的由来,只要不被老大打,全部用any。
-
void 当函数返回没用值的时候使用
function voi():void{ console.log('要找对象,先变帅,胆子大,讲礼貌') } -
对象
let obj: object ={ name: '胡桃' }我对象的名字叫胡桃
-
数组 第一种方式
let arr:[] = [1,2,3]可以对数组内的元素进行类型限制
let arr: number[] = [1,2,3]第二种方式
let arr: Array<number> = [1,2,3] -
元组 就是长度数据类型确定的素组
let tup:[number,string,boolean] = [18,'胡桃',true] -
枚举
enum Day{ SUM, TUE, WED, THU, FRI, SAT, SUN } console.log(Day.SUM) //值为0 console.log(Day.TUE) //值为1 // 枚举每一个数据对应一个编号,从0开始依次递增enum Day{ SUM = 2, TUE, WED, THU, FRI, SAT, SUN } console.log(Day.SUM) //值为2 console.log(Day.TUE) //值为3 // 可以直接赋值,后面的编号在赋值后的值依次递增因为我是学JavaScript来的,对枚举和元组使用较少,不做评价,靠自己感受
-
联合类型 就像有些人喜欢萝莉有些人喜欢御姐,有些人喜欢萝莉和御姐。所以让你多选几个,就有了联合类型
```ty
let unite: number|string = 1
```
格式 *变量类型 | 变量类型*
这种形式将可以使用多个变量类型
断言和类型推断
先讲类型推断
let nub = 1111
//像此时没有自己编写对应的数据类型时,会自动将nub推断为number
断言这个词都很少见,一般断言的造句是,我在这里断言,无论各位靓仔做什么,坚持下去就能赢。
所以断言中文的简单理解就是提前确定,还是百分百的那种十分的确定
第一种方式
str as string
格式为 变量 as 变量类型
第二种方式
<string>str
格式为 <变量类型>变量
这里推荐第一种,作用一般是定义变量类型或者判断变量类型,具体使用请百度。
接口
主要是对象内部数据进行类型限制
interface Girl{
readonly name: string, //只读属性
age: number,
sex?: string, //可选属性
[prop: string]: any; // 添加未知属性,字段名为string,数据为any
}
let girl: Girl={
name: 'linghua',
age: 18,
height: 180,
}
限制函数
interface Add{
(a:number, b:number): number
}
let all:Add = function(a:number,b:number):unmber{
return a + b
}
限制类
interface Girl{
sayHi()
}
class woman implements Girl{
sayJi(){
console.log('你好')
}
}
类中的修饰符
类中加了一些东西,有些东西在es6中也有,简单理一下,需要加难度的自己研究,我这里浅浅的感受一下
class Woman {
public name:string //公共属性,默认状态
private age: number //私有属性,外部和子类无法访问
protected height:number //保护属性,外部无法访问,子类可以访问
readonly sex:string = '女' //只读属性,外部,内部普通方法不能修改,构造函数中可以修改
constructor(name:string,age:number){
this.name = name;
this.age = age;
};
static what(){ //静态属性,通过类获取Woman.what()
console.log('我是一个女人的类')
}
}
函数
函数的写法
function(a:unmber,b:number,c?:number,...arg:number[]):number{
return a + b;
}
//其中?是可选
//...arg:number[],是剩余参数
//其实就是对参数和返回的值进行类型限制
let add:(a:number,b:number)=>number = function(a:unmber,b:number):number{
return a + b;
}
函数重载
function add(a:number,b:number): number
function add(a:string,b:string): string
function add(a: string|number, b: string|number){
if (a as number && b as number) {
return (a as number) + (b as number)
}
if (a as string && b as string) {
return a as string + b as string
}
}
console.log(add(1,2))
console.log(add('你','好'))
//console.log(add(1,'好')) //此时就会报错
//相同的函数,传入固定的参数和返回值的组合
泛型
就是参数类型改变时,相同的函数要再写一遍,为了解决这个问题出现的,简单理解就是类型限制变成了一个变量。
function look<T>(a:T):T{
return a
}
console.log(look<number>(1)); // 当输入是number时,类型限制就是number
console.log(look<string>('aaa'));// 当输入是string时,类型限制就是string
//使用这样的方法T是自己定义的变量命
多个泛型参数
function look<T,k>(a:T,b:k):void{
console.log(a,b)
}
console.log(look<number,string>(1,'你好'));
泛型接口
interface Girl<T>{
name:string,
id: T,
}
类中使用泛型
class Girl<T>{
name: string
id: T
}
泛型约束
interface id {
numb:number
}
function add<T extends id>(a:T,b:T){
return a.numb + b.numb
}
//我感觉更像是提示一下参数内部有什么