TypeScript入门

1、前提

安装好node，然后全局安装typescript

npm install typescript -g

2、调试工具

新建一个tsdemo.ts文件，随便写一个函数

function fn() {
    
  let web: string = "hello world";
  console.log(web)
}
fn();

可以使用命令，转换为js文件，然后运行

tsc tsdemo.ts

node tsdemo.js

上面运行比较麻烦一点
可以安装ts-node，就可以直接运行tsdemo.ts

npm install -D ts-node

安装后，如果ts-node tsdemo.ts报错的话，再安装@types/node

npm install -D tslib @types/node

ts-node tsdemo.ts

3、基础类型与用法

// string类型
const str: string = 'hello world';

// object类型
const obj: {
     name: string, age: number } = {
    
    name: '小白',
    age: 20
}

// 通过接口定义objInterFace类型，实现复用 interface把可重复使用的类型注解，定义为统一的接口
interface objInterFace {
    
    name: string;
    age: number;
    height?: number; // 非必选值
    [propName: string]: any; // 可包含任意数量的其它属性（属性名是字符串类型，属性值是任何类型）
    skill(): string; // 可以设置方法，返回值是字符串类型
}
const obj2: objInterFace = {
    
    name: '小白',
    age: 20,
    other1: null,
    skill() {
    
        return '技能'
    }
}
const obj3 = {
    
    name: '小白',
    age: 20,
    other2: '任意值',
    skill() {
    
        return '技能'
    }
}
const fnInterface = ( e: objInterFace ) => {
    
    console.log('姓名：', e.name, ' 年龄：', e.age, ' 其他：', e.other)
}
fnInterface(obj3)

// 内容是string类型的数组
const arr: string[] = ['1', '2'];
// 内容是number类型的数组
const arr1: number[] = [1, 2];
// 内容是numbe或者stringr类型的数组
const arr2: (number | string)[] = ['1', 2, '3'];
// 内容是对象的数组
const arr3: {
     name: string, age: number }[] = [
    {
     name: '小白', age: 20 },
    {
     name: '小黑', age: 21 }
]
// 类型别名
type arr4Type = {
     name: string, age: number }
const arr4: arr4Type[] = [
    {
     name: '小白', age: 20 },
]
// 类
class arr5Class {
    
    name: string
    age: number
}
const arr5: arr5Class[] = [
    {
     name: '小白', age: 20 },
]

// 元组
const tuple: [number, string, boolean] = [1, '2', true]
const tuple1: [number, string, boolean][] = [
    [1, '2', true],
    [9, '8', false]
]

// 类型注解
let num: number;
num = 1;
// 类型推断
let num2 = 1

// 规定fn函数，接收first和second两个参数，返回的结果是number类型
function fn(first: number, second: number): number {
    
    return first + second;
}
const fnResult = fn(1, 2)
// noReturn函数无返回值，添加void注解
function noReturn(): void {
    
    console.log('没有返回结果');
}
// 函数参数为对象
function fn1({
     first, second}: {
     first: number, second: number}): number {
    
    return first + second;
}
const fnResult1 = fn1({
     first: 1, second: 2 })

未完待续…

参考资料：
TypeScript中文网
TypeScript 从入门到精通图文视频教程-免费教程