TypeScript at tsconfig.json

Ipinaliwanag ng artikulong ito ang TypeScript at tsconfig.json.

Simula sa pangunahing papel ng TypeScript, ipapaliwanag namin sa pamamagitan ng mga tiyak na halimbawa kung paano gumagana ang tsconfig.json sa loob ng isang proyekto.

YouTube Video

TypeScript at tsconfig.json

Ang TypeScript ay 'JavaScript na may mga type.'. Gayunpaman, para magamit ang TypeScript nang epektibo sa totoong mga proyekto, mahalagang maunawaan nang tama ang tsconfig.json at i-configure ito nang may layunin.

Bakit natin kailangan ang TypeScript?

Una, ang pangunahing dahilan sa paggamit ng TypeScript ay ang 'kakayahang makita ang mga pagkakamali bago tumakbo ang code.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Ang code na ito ay hindi magdudulot ng error sa JavaScript hangga't hindi tumatakbo, pero sa TypeScript ito ay nagreresulta ng type error habang nagko-compile pa lang.

Ang 'maagang pagtukoy' na ito ay lubos na nagpapabuti ng kahusayan at kalidad ng pag-develop.

Paano pinapatakbo ang TypeScript?

Sa prinsipyo, hindi maaaring patakbuhin ang TypeScript nang direkta. Kailangan mo itong i-convert sa JavaScript gamit ang tsc (TypeScript Compiler)..

1npm install -D typescript
2npx tsc --init

• Sa paggawa nito, nalilikha ang tsconfig.json, na nagsisilbing central file na nagtatakda ng pag-uugali ng TypeScript project.

Ano ang papel ng tsconfig.json?

Ang tsconfig.json ay isang configuration file na tumutukoy kung 'alintuntunin sa anong mga file,' 'anong mga patakaran,' at 'paano ito iko-convert.'. Bagaman mukhang komplikado ito sa simula, iilan lang sa mga setting ang talagang mahalaga.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Sa mga setting na ito lamang, posible ang moderno at ligtas na pag-develop sa TypeScript.

target: Ang bersyon ng JavaScript na i-ooutput

Tinutukoy ng target ang specification level ng nilalabas na JavaScript.

1"target": "ES2020"

Dahil dito, maglalabas ang TypeScript ng JavaScript na katumbas ng ES2020. Para sa mas luma na mga environment, piliin ang ES5; para naman sa pinaka-makabago, piliin ang ES2022, atbp.

Kapag tinukoy ang ESNext

1"target": "ESNext"

• Ang ESNext ay nangangahulugan na ilalabas ang pinakabagong available na syntax ng JavaScript gaya ng orihinal. Hindi itinatranpile ng TypeScript ang syntax na ito, at iniiwan na lang ito sa runtime environment tulad ng Node.js o mga browser para iproseso.

• Kaya't ang ESNext ay angkop lang kapag tanging pinakabagong Node.js ang target mo, o kapag gumagamit ka ng Babel o bundler para sa hiwalay na transpilation. Sa kabilang banda, kung hindi sinusuportahan ng runtime environment ang pinakabagong syntax, maaaring magresulta ito sa runtime errors, kaya ingat sa paggamit.

module: Tukuyin ang format ng module

Ang module ay tumutukoy ng format ng module.

1"module": "ESNext"

• Ang ESNext ay karaniwan na sa frontend at sa mga makabago na Node.js environment.
• Piliin lamang ang "CommonJS" kung kinakailangan talaga.

strict: Palakasin ang kaligtasan ng mga type

Ang strict ay isang switch para masigurong pinakamataas ang safety sa TypeScript.

1"strict": true

• Sa pag-enable nito, mahuhuli ang malalabong type at posibleng bugs.

strict mode at implicit any

Kapag in-enable mo ang strict, tinuturing ng TypeScript na error ang mga variable na hindi matukoy ang type.

1function printValue(value) {
2	console.log(value);
3}

• Ang variable na value na ito ay walang type information sa deklarasyon, kaya hindi matukoy ng TypeScript ang type nito. Dahil dito, implicit na ginagamit ang any, na magti-trigger ng warning (error) sa strict mode.

1function printValue(value: number) {
2	console.log(value);
3}

• Sa pamamagitan ng tuwirang paglalaan ng type gaya nito, mauunawaan ng TypeScript na 'numbers lang ang kayang hawakan ng variable na ito.'. Sa TypeScript, mas mahalaga na matukoy nang tiyak ang type kaysa sa maaaring hindi nalang maglagay ng type.

include/exclude: Kontrolin kung aling mga file ang ico-compile

Sa tsconfig.json, maaari mong tukuyin kung alinh mga file ang isasama at alin ang hindi sa compilation.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Dahil dito, ang mga file lang sa ilalim ng src ang mamanage ng TypeScript.
• Ang node_modules na tinukoy sa exclude ay hindi isasali sa compilation kahit pa bahagi ito ng mga tinukoy na path sa include.

outDir: Tukuyin ang output directory

Itakda ang outDir upang mamahala ng output na lokasyon ng build.

1"outDir": "dist"

• Dahil dito, lahat ng output ng compilation ay mapupunta sa dist folder. Sa praktis, karaniwan na paghihiwalayin ang source code at ang mga build artifact.

rootDir: Tukuyin ang source directory

Tinutukoy ng rootDir ang directory na ituturing ng TypeScript na root ng source code.

1"rootDir": "src"

• Sa setting na ito, mapapanatili ng TypeScript ang structure ng directory mula sa src kapag naglalabas ng mga file. Halimbawa, ang src/index.ts ay lalabas bilang dist/index.js.

• Magrereplika ang directory structure ng tinukoy na rootDir sa outDir.

esModuleInterop: Nag-uugnay ng CommonJS at ES Modules

Susunod, tingnan naman natin ang esModuleInterop.

1"esModuleInterop": true

• Kapag naka-enable ito, ligtas mong magagamit ang CommonJS modules gamit ang import syntax.

1import fs from "fs";

• Ang setting na ito ay halos kailangan kapag gumagamit ng Node.js.

noImplicitAny: Ipagbawal ang implicit na 'any' types

Mahalaga ring palakasin ang type checks sa tsconfig.json.

1"noImplicitAny": true

• Dahil dito, maipagbabawal mo ang implicit na any types. Makakatulong ito para madali mong makita kung saan ka nakalimot maglagay ng type.

Setup para matukoy ang hindi nagagamit na code

Makakatulong din ang mga setting na tumutukoy sa hindi nagagamit na code para mapabuti ang maintainability.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Sa ganito, agad magkakaroon ng warning ang mga hindi kailangang variable at argument.

lib: Tukuyin ang mga built-in API na magagamit

Ang lib ay setting na nagtutukoy ng mga standard API na inaakalang naroroon ng TypeScript.

1"lib": ["ES2020", "DOM"]

• Sa setting na ito, nagiging available ang mga sumusunod na type:. Sa ES2020, magagamit ang mga makabagong feature tulad ng Promise, Map, at Set. Sa DOM, magagamit ang mga API ng browser tulad ng document, window, at HTMLElement.

Sa frontend, isama ang DOM; sa Node.js-only na proyekto, alisin ang DOM upang maiwasan ang hindi kailangan na global types.

moduleResolution: Mga patakaran sa paghahanap ng module

Tinutukoy ng moduleResolution kung paano hinahanap at nire-resolve ang mga module sa import statements.

1"moduleResolution": "Node"

Ang dalawang pangunahing opsyon ay ang mga sumusunod:.

• Kung ilalagay mo ang Node, gagamitin nito ang module resolution rules ng Node.js.
• Ang Classic ay dating paraan ng TypeScript, ngunit bihira na itong gamitin ngayon.

Sa mga environment na gumagamit ng Node.js o bundler, mas ligtas na itukoy nang malinaw ang Node.

Isang minimal at handa nang gamitin sa production na tsconfig.json

Batay sa mga natalakay natin, ganito ang magiging anyo ng minimal at production-ready na tsconfig.json:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Ang configuration na ito ay nagbibigay ng ligtas na pundasyon para sa frontend at Node.js projects.

Buod: Ang tsconfig.json ay isang 'rulebook'

Ang tsconfig.json ay hindi lang configuration file, kundi isang 'rulebook' para sa buong proyekto. Sa tsconfig.json, malinaw na natutukoy ang mga importanteng polisiya tulad ng mga sumusunod:.

• Ang antas ng type safety.
• Mga coding convention para sa inyong team.
• Pagpigil ng mga bug sa hinaharap.

Sa pag-unawa sa tsconfig.json, magagawa mong hindi lang sumulat ng TypeScript kundi magdisenyo rin ng mga proyekto para sa ligtas na paggamit ng TypeScript.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video