Getting started with typescript

1、 Premise

Install well node, Then install it globally typescript

npm install typescript -g

2、 Debugging tools

Create a new one tsdemo.ts file , Write any function

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

You can use commands , Convert to js file , And then run

tsc tsdemo.ts

node tsdemo.js

The operation above is a little more troublesome
Can install ts-node, You can run it directly tsdemo.ts

npm install -D ts-node

After installation , If ts-node tsdemo.ts If an error , Install again @types/node

npm install -D tslib @types/node

ts-node tsdemo.ts

3、 Basic type and usage

// string type 
const str: string = 'hello world';

// object type 
const obj: {
     name: string, age: number } = {
    
    name: ' The small white ',
    age: 20
}

//  Define... Through the interface objInterFace type , Realize reuse  interface Annotate reusable types , Defined as a unified interface 
interface objInterFace {
    
    name: string;
    age: number;
    height?: number; //  Optional value 
    [propName: string]: any; //  Can contain any number of other attributes （ The property name is a string type , Attribute values are of any type ）
    skill(): string; //  You can set the method , The return value is of string type 
}
const obj2: objInterFace = {
    
    name: ' The small white ',
    age: 20,
    other1: null,
    skill() {
    
        return ' Skill '
    }
}
const obj3 = {
    
    name: ' The small white ',
    age: 20,
    other2: ' Any value ',
    skill() {
    
        return ' Skill '
    }
}
const fnInterface = ( e: objInterFace ) => {
    
    console.log(' full name ：', e.name, '  Age ：', e.age, '  other ：', e.other)
}
fnInterface(obj3)

//  The content is string An array of types 
const arr: string[] = ['1', '2'];
//  The content is number An array of types 
const arr1: number[] = [1, 2];
//  The content is numbe perhaps stringr An array of types 
const arr2: (number | string)[] = ['1', 2, '3'];
//  The content is an array of objects 
const arr3: {
     name: string, age: number }[] = [
    {
     name: ' The small white ', age: 20 },
    {
     name: ' Little black ', age: 21 }
]
//  Type the alias 
type arr4Type = {
     name: string, age: number }
const arr4: arr4Type[] = [
    {
     name: ' The small white ', age: 20 },
]
//  class 
class arr5Class {
    
    name: string
    age: number
}
const arr5: arr5Class[] = [
    {
     name: ' The small white ', age: 20 },
]

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

//  Type notes 
let num: number;
num = 1;
//  Type inference 
let num2 = 1

//  Regulations fn function , receive first and second Two parameters , The result is number type 
function fn(first: number, second: number): number {
    
    return first + second;
}
const fnResult = fn(1, 2)
// noReturn Function has no return value , add to void annotation 
function noReturn(): void {
    
    console.log(' No results returned ');
}
//  Function arguments are objects 
function fn1({
     first, second}: {
     first: number, second: number}): number {
    
    return first + second;
}
const fnResult1 = fn1({
     first: 1, second: 2 })

To be continued …

Reference material ：
TypeScript Chinese net
TypeScript From getting started to mastering graphic and video tutorials - Free tutorial