# typescript **Repository Path**: hrbu2024/typescript ## Basic Information - **Project Name**: typescript - **Description**: 学习ts - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-09-02 - **Last Updated**: 2026-09-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README **[MDN Web Docs (mozilla.org)](https://developer.mozilla.org/zh-CN/)** # 安装typescript ``` npm install typescrip -g ``` 编译ts 为 js ``` tsc demo.ts ``` ![image-20260902152908278](assets/image-20260902152908278.png) Ts兼容所有的 JS语法 ![image-20260902153155241](assets/image-20260902153155241.png) # ⾃动化编译 ## tsc --init ```json { // Visit https://aka.ms/tsconfig to read more about this file "compilerOptions": { // File Layout // "rootDir": "./src", // "outDir": "./dist", // Environment Settings // See also https://aka.ms/tsconfig/module "module": "esnext", "target": "esnext", "types": [], // For nodejs: // "lib": ["esnext"], // "types": ["node"], // and npm install -D @types/node // Other Outputs "sourceMap": false, "declaration": false, "declarationMap": false, // Stricter Typechecking Options "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true, // Style Options // "noImplicitReturns": true, // "noImplicitOverride": true, // "noUnusedLocals": true, // "noUnusedParameters": true, // "noFallthroughCasesInSwitch": true, // "noPropertyAccessFromIndexSignature": true, // Recommended Options "strict": true, "jsx": "react-jsx", "verbatimModuleSyntax": true, "isolatedModules": true, "noUncheckedSideEffectImports": true, "moduleDetection": "force", "skipLibCheck": true, } } ``` ## 执行观察 批量将ts 翻译成js ``` tsc --watch 或者 tsc -w ``` # 直接执行ts文件 node **v22.6.0** 通过 node命令 直接执行ts文件 ``` C:\Users\Administrator>node --version v24.19.0 C:\Users\Administrator> ``` 需要修改code runer 插件 运行ts的方式，默认使用的是 ts-node 改成node ![image-20260902162220881](assets/image-20260902162220881.png) 修改setting。json ![image-20260902162250303](assets/image-20260902162250303.png) ``` "typescript": "node ", ``` ![image-20260902162319810](assets/image-20260902162319810.png) ```json { "redhat.telemetry.enabled": true, "workbench.colorTheme": "Light+", "editor.mouseWheelZoom": true, "git.enableSmartCommit": true, "git.confirmSync": false, "code-runner.clearPreviousOutput": true, "files.autoSave": "afterDelay", "security.workspace.trust.untrustedFiles": "open", "code-runner.executorMap": { "javascript": "node", "java": "cd $dir && javac $fileName && java $fileNameWithoutExt", "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "zig": "zig run", "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "php": "php", "python": "python -u", "perl": "perl", "perl6": "perl6", "ruby": "ruby", "go": "go run", "lua": "lua", "groovy": "groovy", "powershell": "powershell -ExecutionPolicy ByPass -File", "bat": "cmd /c", "shellscript": "bash", "fsharp": "fsi", "csharp": "scriptcs", "vbscript": "cscript //Nologo", // "typescript": "ts-node", "typescript": "node ", "coffeescript": "coffee", "scala": "scala", "swift": "swift", "julia": "julia", "crystal": "crystal", "ocaml": "ocaml", "r": "Rscript", "applescript": "osascript", "clojure": "lein exec", "haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt", "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt", "racket": "racket", "scheme": "csi -script", "ahk": "autohotkey", "autoit": "autoit3", "dart": "dart", "pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt", "d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt", "haskell": "runghc", "nim": "nim compile --verbosity:0 --hints:off --run", "lisp": "sbcl --script", "kit": "kitc --run", "v": "v run", "sass": "sass --style expanded", "scss": "scss --style expanded", "less": "cd $dir && lessc $fileName $fileNameWithoutExt.css", "FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "sml": "cd $dir && sml $fileName", "mojo": "mojo run", "erlang": "escript", "spwn": "spwn build", "pkl": "cd $dir && pkl eval -f yaml $fileName -o $fileNameWithoutExt.yaml", "gleam": "gleam run -m $fileNameWithoutExt" }, "code-runner.executorMapByGlob": { "pom.xml": "cd $dir && mvn clean package" } } ``` # 类型声明 使⽤ : 来对变量或函数形参，进⾏类型声明： ```typescript let a: string //变量a只能存储字符串 let b: number //变量b只能存储数值 let c: boolean //变量c只能存储布尔值 a = 'hello' a = 100 //警告：不能将类型“number”分配给类型“string” b = 666 b = '你好'//警告：不能将类型“string”分配给类型“number” c = true c = 666 //警告：不能将类型“number”分配给类型“boolean” // 参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字 function demo(x:number,y:number):number{ return x + y } demo(100,200) demo(100,'200') //警告：类型“string”的参数不能赋给类型“number”的参数 demo(100,200,300) //警告：应有 2 个参数，但获得 3 个 demo(100) //警告：应有 2 个参数，但获得 1 个 ``` 在 : 后也可以写字⾯量类型，不过实际开发中⽤的不多。 ```typescript let a: '你好' //a的值只能为字符串“你好” let b: 100 //b的值只能为数字100 a = '欢迎'//警告：不能将类型“"欢迎"”分配给类型“"你好"” b = 200 //警告：不能将类型“200”分配给类型“100” ``` ![image-20260902164419967](assets/image-20260902164419967.png) # 基础类型 ①**string** ② **number** ③ **boolean** ④ **null** ⑤ **undefined** ⑥ **big int** ⑦ **symbol** ⑧ **object** 备注：其中 **object** 包含： **Array** 、 **Function** 、 **Date** 、 **Error** 等...... ts增加的类型 **1.** 上述所有 JavaScript 类型 **2.** 六个新类型： ① **any** ② **unknown** ③ **never** ④ **void** ⑤ **tuple** ⑥ **enum** **3.** 两个⽤于⾃定义类型的⽅式： ① **type** ② **interface** ``` 在 JavaScript 中的这些内置构造函数： Number 、 String 、 Boolean ，⽤于创建对应的包装对象， 在⽇常开发时很少使⽤，在 TypeScript 中也是同理，所以 在 TypeScript 中进⾏类型声明时，通常都是⽤⼩写的 number 、 string 、 boolean ``` # module ES6 支持 export import A.js export ``` export function sayHi(){ } ``` B.js import ``` import {sayHi} from 'a.js' sayHi(*) ``` # 案例 移动的星空: - 背景: 利用css中的图片的渐变颜色 - 绘制星星 - 1层，最远 - 2层 ，中间 - 3层 ，最近（最大） - 绘制一个星星 - 坐标 - radius - 绘制星星 ``` var ctx = canvas.getContext("2d"); ctx.arc( 400,400 ,size/2 , 0 ,2*Math.PI ,true) ctx.fillStyle = "rgb(255,255,0)" ctx.fill() ``` - 移动 - 位移的方向 - vx - vy ## 项目框架 - index.html - script 引入 app.js - canvas : id='sky' - 设置背景 - app.ts - 翻译成js ## 绘制的过程 - 初始化ctx - 画一个星星 - 循环绘制很多个 - 定时任务(50) - 清空面板 - 让所有星星移动 - 重新绘制 ## 初始化 - 找到canvas - 获取上下文 - 设置一下大小 ```js //找到canvas const canvas:HTMLCanvasElement = document.getElementById('sky') as HTMLCanvasElement // 获取上下文 const ctx:CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D // 设置大小 canvas.width = window.innerWidth canvas.height = window.innerHeight //ctx绘制 ``` ## 封装一个Star的类 - 属性 - 坐标 - radius 半径 - 移动的方向 - vx - vy - 绘制星星 - 移动 ```js //找到canvas const canvas:HTMLCanvasElement = document.getElementById('sky') as HTMLCanvasElement // 获取上下文 const ctx:CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D // 设置大小 canvas.width = window.innerWidth canvas.height = window.innerHeight //ctx绘制 class Star{ vx:number; vy:number; //属性 constructor(public x:number,public y:number,private radius:number ){ this.vx = 0.1 this.vy = 0.1 } draw(){ ctx.beginPath() ctx.arc( this.x,this.y ,this.radius , 0 ,2*Math.PI ,true) ctx.fillStyle = "rgb(243, 243, 243)" ctx.fill() } } //尝试绘制一个 星星 let stars:Star[] = [] //第一层 const radiusLevel1 = 1; for(let i=0 ;i<1000;i++){ // const rndX = Math.floor( Math.random() * (max-min+1) ) + min let rx = Math.floor(Math.random() * (canvas.width - 10 + 1)) +10 let ry = Math.floor(Math.random() * (canvas.height - 10 + 1)) +10 const star = new Star(rx,ry,radiusLevel1) stars.push(star) } stars.forEach(star=>{ star.draw() }) ``` ![image-20260908094909680](assets/image-20260908094909680.png)