简介
安装node
安装npm
安装typescript
安装命令:npm install typescript –g
校验安装结果:tsc
tsc
此时,node无法直接运行ts文件,会报错,需要先把ts文件编译成js文件才能运行
编译方式:tsc +ts文件全名
运行js方式:node +js文件全名
ts-node
专门运行ts文件的一种node组件
安装命令:npm install –g ts-node
运行方式:ts-node +ts文件全名
静态类型
一旦定义不能改变的类型
定义
let count:number = 1;
其中number是基础类型
赋值
count = 'str'; // 这样写会报错,count只能接受number类型的数据
count = 22; // 这个样子写是没有问题的,因为一旦定义类型不能改变
深层理解:变量可直接使用对应类型的方法
变量定义成了何种类型,那么这个变量对应就可以使用其类型对应的方法
console.log(typeof count.toString());
自定义静态类型
写法:接口
interface User {
uname: string;
age: number;
}
const zhangsan: User = {
uname: "张三",
age: 33,
};
同时变量zhangsan能直接使用User里的属性name和age:zhangsan.age // 输出33
基础静态类型
null underfined symbol boolean void number string
对象类型
对象类型
const person : {
age:number,
height:number,
name:string
} = {
age:1,
height:20,
name:'camellia'
}
console.log(person)
数组类型
let personArray:string[] = ['11','22','33'];
console.log(personArray)
一般数组类型的定义
普通定义
const numberArr = [1, 2, 3]
鼠标放上去可以看到这是个number类型数组,这个TypeScript类型推断出来的。如果不想用推断,可以写成类型注解定义
类型注解定义
const numberArr: number[] = [1, 2, 3]
字符串数组可以写成
const stringArr: string[] = ["a", "b", "c"]
undefined类型也可以
const undefinedArr: undefined[] = [undefined, undefined]
复合类型注解定义
有多种类型的数组
const arr: (number | string)[] = [1, "string", 2]
数组中对象类型的定义
正式变成中数组一般都是复杂对象,可以写成
const users: {
name: string, age: Number }[] = [
{
name: "张三", age: 18 },
{
name: "李四", age: 19 },
];
复用性
可以用类型别名提高复用性(多个数组相同对象类型可以重用)
type lady = {
name: string, age: Number };
const users: lady[] = [
{
name: "张三", age: 18 },
{
name: "李四", age: 19 },
];
或者用类定义
class lady {
name: string;
age: number;
}
const users: lady[] = [
{
name: "张三", age: 18 },
{
name: "李四", age: 19 },
];
元组
是JavaScript中没有的概念,并不常用,一般在CVS这种文件的时候会使用元组,可以把元组看成数组的一个加强
基本应用
先看数组的缺点
const lady: (string | number)[] = ["zhangsan", "teacher", 28]
虽然已经加了注解,但依然不能很好限制数组,比如修改成
const lady: (string | number)[] = ["zhangsan", 28, "teacher"]
TypeScrip也不会报错,即使数组已经改变了
使用元组就可以很好限制
const lady: [string, string, number] = ["zhangsan", "teacher", 28]
这时候如果数组发生改变,TypeScrip会马上报错
元组的使用
使用CSV作为数据源
“zhangsan”, “teacher”, 28;
“lisi”, “teacher”, 18;
“wangwu”, “teacher”, 25;
就可以使用元组进行严谨编程
const ladys: [string, string, number][] = [
["zhangsan", "teacher", 28],
["lisi", "teacher", 18],
["wangwu", "teacher", 25],
];
类类型
class persons{
}
let personObj:persons = new persons()
函数类型
const girl: () => string = () => {
return "gg";
}
函数的参数
function getTotal: (one: number, two: number) {
return one + two
}
函数参数为对象时对象内部的参数类型
function getTotal: ({
one,two }: {
one: numer,two: number }) {
return one + two
}
const one = getTotal({
one: 1, two: 2})
函数的返回类型
基本类型
function getTotal: (one: number, two: number) {
return one + two + ‘’
}
const total = getTotal(1, 2)
以上代码返回类型是字符串,是错误的,但是编译不会报错,因为没限制返回类型
可改为
function getTotal: (one: number, two: number): number {
return one + two + ''
}
void
function getTotal: (one: number, two: number): void {
// 没有return,即使return ''程序也是会报错的
}
never
中间会抛异常,后面有语句永远都不会执行到
function errorFuntion(): never {
throw new Error();
console.log("Hello World");
}
或者死循环
function forNever(): never {
while (true) {
}
console.log("Hello world");
}
函数参数为对象解构时
interface person{
age:number,
name:string
}
let one_person:person = {
age:100,
name:"zhangsanfeng"
}
/**
* 函数参数为对象(解构)时
* @param one_person
*/
function getperson(one_person:person):string
{
return one_person.age +'-'+one_person.name;
}
console.log(getperson(one_person));
类型注解
type annotation
在声明变量的时候,显性的声明他的类型
let count: number;
count = 123;
这段代码就是类型注解,显性示的告诉代码,count变量就是一个数字类型,这就叫做类型注解
类型推断
type inferrence
在声明变量的时候,不声明类型,但TypeScript也能知道代码的类型
let countInference = 123;
并没有显性的告诉代码变量countInference是一个数字类型,但是如果把鼠标放到变量上,会发现 TypeScript 自动把变量注释为了number类型,也就是说TypeScript是有某种推断能力通过你的代码自动的去尝试分析变量的类型
规则
如果 TS 能够自动分析变量类型,就不需要声明类型
如果 TS 无法分析变量类型的话, 就需要使用类型注解声明类型
接口
根据需求来定义接口,然后再定义类来实现这个接口
作用
- 接口为一个或多个类提供规范
- 接口隔离:面向对象设计原则之一:高内聚,低耦合,可是类与类之间往往会有千丝万缕的关系,比如泛化、实现、组合、聚合、关联、依赖。而接口则可以将一个类对另一个类的依赖性降到最低
普通定义
const normal = (name:string,age:number,height:number):string => {
let str = "";
if(age > 30 || height < 165)
{
str = name+"未通过审核"
}
else
{
str = name