TypeScript ਵਿੱਚ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ Visual Studio Code
TypeScript ਵਿੱਚ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ Visual Studio Code
Visual Studio Code ਐਕਸਟੈਂਸ਼ਨ ਪੈਨ ਨੂੰ ਖੋਲ੍ਹੋ ਅਤੇ ਨੈਵੀਗੇਟ ਕਰੋ।
" " ਲਈ ਖੋਜ ਕਰੋ TypeScript ਅਤੇ ਅਧਿਕਾਰਤ TypeScript ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ।
TypeScript tsconfig.json ਫਾਈਲ ਵਿੱਚ ਕੰਪਾਈਲਰ ਵਿਕਲਪਾਂ ਦੀ ਸੰਰਚਨਾ ਕਰੋ
TypeScript tsconfig.json ਫਾਈਲ ਵਿੱਚ ਕੰਪਾਈਲਰ ਵਿਕਲਪਾਂ ਦੀ ਸੰਰਚਨਾ ਕਰੋ ।
ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਲੋੜਾਂ ਅਨੁਸਾਰ ਕੰਪਾਈਲਰ ਵਿਕਲਪਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ।
ਉਦਾਹਰਣ ਲਈ:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true
}
}
IntelliSense, ਆਟੋਮੈਟਿਕ ਟਾਈਪ ਚੈਕਿੰਗ, ਅਤੇ ਕੋਡ ਨੈਵੀਗੇਸ਼ਨ ਵਰਗੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ Visual Studio Code
ਏਕੀਕ੍ਰਿਤ ਦੇ ਨਾਲ TypeScript, ਤੁਹਾਨੂੰ IntelliSense ਸੁਝਾਵਾਂ, ਕਿਸਮ ਦੀ ਜਾਣਕਾਰੀ, ਅਤੇ ਗਲਤੀ ਖੋਜ ਤੋਂ ਲਾਭ ਹੋਵੇਗਾ ਜਿਵੇਂ ਤੁਸੀਂ ਵਿੱਚ ਕੋਡ ਲਿਖਦੇ ਹੋ Visual Studio Code ।
TypeScript ਦੀਆਂ ਉੱਨਤ ਭਾਸ਼ਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਜਿਵੇਂ ਕਿ ਕੋਡ ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਰੀਫੈਕਟਰਿੰਗ, ਸੰਪਾਦਕ ਦੇ ਅੰਦਰ ਵੀ ਉਪਲਬਧ ਹਨ।
TypeScript ਨਾਲ ਏਕੀਕ੍ਰਿਤ Webpack
ਲੋੜੀਂਦੇ ਪੈਕੇਜ ਇੰਸਟਾਲ ਕਰੋ: typescript, ts-loader ਅਤੇ webpack
ਪੈਕੇਜ ਇੰਸਟਾਲ ਕਰਨ ਲਈ ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ:
npm install typescript ts-loader webpack --save-dev
ts-ਲੋਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਾਈਲਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਸੰਰਚਿਤ ਕਰੋ webpack.config.js TypeScript
ਆਪਣੀ ਫਾਈਲ ਵਿੱਚ ਹੇਠ ਦਿੱਤੀ ਸੰਰਚਨਾ ਸ਼ਾਮਲ ਕਰੋ: webpack.config.js
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_module/
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
TypeScript ਸੰਕਲਨ ਅਤੇ ਬੰਡਲ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਵਾਧੂ ਪਲੱਗਇਨ ਅਤੇ ਲੋਡਰ ਸੈਟ ਅਪ ਕਰੋ
ਤੁਸੀਂ ਆਪਣੀ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਹੋਰ ਵਧਾਉਣ ਲਈ ਹੋਰ ਪਲੱਗਇਨ ਅਤੇ ਲੋਡਰ ਜਿਵੇਂ ਕਿ terser- webpack -plugin, clean- webpack -plugin, ਜਾਂ babel -loader ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।
TypeScript ਨਾਲ ਏਕੀਕ੍ਰਿਤ Babel
ਲੋੜੀਂਦੇ ਪੈਕੇਜ ਇੰਸਟਾਲ ਕਰੋ: typescript, @ babel /preset- typescript, ਅਤੇ @ babel /cli
ਪੈਕੇਜ ਇੰਸਟਾਲ ਕਰਨ ਲਈ ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ:
npm install typescript @babel/preset-typescript @babel/cli --save-dev
ਪ੍ਰੀਸੈਟ ਨੂੰ ਸੰਰਚਿਤ ਕਰੋ ਜਾਂ ਸ਼ਾਮਲ ਕਰੋ .babelrc babel.config.js TypeScript
ਇੱਕ ਬਣਾਓ. babel rc ਫਾਈਲ ਜਾਂ ਆਪਣੀ .config.js ਫਾਈਲ ਵਿੱਚ ਹੇਠ ਦਿੱਤੀ ਸੰਰਚਨਾ ਜੋੜੋ babel:
module.exports = {
presets: ['@babel/preset-typescript']
};
Babel ਖਾਸ TypeScript ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ ਅਨੁਕੂਲਤਾ ਲੋੜਾਂ ਲਈ ਸੰਰਚਨਾ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ
ਤੁਸੀਂ Babel ਖਾਸ TypeScript ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਜਾਂ ਟੀਚੇ ਦੇ ਵਾਤਾਵਰਨ ਨਾਲ ਅਨੁਕੂਲਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਵਾਧੂ ਪਲੱਗਇਨ ਜਾਂ ਪ੍ਰੀਸੈੱਟ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।
ਸੁਝਾਅ ਅਤੇ ਵਧੀਆ ਅਭਿਆਸ
- TypeScript ਆਪਣੇ ਚੁਣੇ ਹੋਏ ਵਿਕਾਸ ਸਾਧਨਾਂ ਵਿੱਚ ਵਧੀ ਹੋਈ ਉਤਪਾਦਕਤਾ ਅਤੇ ਵਿਕਾਸਕਾਰ ਅਨੁਭਵ ਲਈ ਸੰਬੰਧਿਤ ਐਕਸਟੈਂਸ਼ਨਾਂ ਅਤੇ ਪਲੱਗਇਨਾਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ ।
- ਵਿਕਾਸ ਦੇ ਦੌਰਾਨ ਤੇਜ਼ੀ ਨਾਲ ਨਿਰਮਾਣ ਸਮੇਂ ਲਈ ਲੀਵਰੇਜ TypeScript ਦੀ ਵਾਧਾ ਸੰਕਲਨ ਵਿਸ਼ੇਸ਼ਤਾ(
tsc --watchਜਾਂ)।webpack --watch - ਆਪਣੇ ਖਾਸ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਨਾਲ ਏਕੀਕਰਣ ਨੂੰ ਵਧੀਆ ਬਣਾਉਣ ਲਈ ਉੱਨਤ ਸੰਰਚਨਾ ਵਿਕਲਪਾਂ ਦੀ ਪੜਚੋਲ ਕਰੋ, ਜਿਵੇਂ ਕਿ ਲਈ ESLint ਨਿਯਮ ਸਥਾਪਤ ਕਰਨਾ TypeScript ।
ਇਸ ਵਿਆਪਕ ਗਾਈਡ ਦੀ ਪਾਲਣਾ ਕਰਕੇ, ਤੁਸੀਂ TypeScript ਪ੍ਰਸਿੱਧ ਵਿਕਾਸ ਸਾਧਨਾਂ ਜਿਵੇਂ ਕਿ Visual Studio Code, Webpack ਅਤੇ Babel. TypeScript ਇਹ ਤੁਹਾਡੇ ਵਿਕਾਸ ਕਾਰਜ ਪ੍ਰਵਾਹ ਨੂੰ ਵਧਾਏਗਾ, ਉੱਨਤ ਭਾਸ਼ਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰੇਗਾ, ਅਤੇ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਦੇ ਲਾਭਾਂ ਦਾ ਪੂਰਾ ਲਾਭ ਲੈਣ ਦੀ ਆਗਿਆ ਦੇਵੇਗਾ ।